<template>
  <div>
    <el-form :model="form" :rules="rules" ref="ruleForm" v-loading="dloading" element-loading-text="验证中，请稍后"
    element-loading-spinner="el-icon-loading">
    <el-form-item label="ips" :label-width="formLabelWidth" prop="ips">
      <el-input v-model="form.ips" autocomplete="off"></el-input>
    </el-form-item>
    <!-- <el-form-item label="" :label-width="formLabelWidth" prop="ips">
      <el-input v-model="form.ips" autocomplete="off"></el-input>
    </el-form-item> -->
  </el-form>
  <el-table
      :data="table"
      style="width: 100%"
      height="300px"
      >
      <el-table-column
      type="index"
      width="50">
    </el-table-column>
      <el-table-column>
        <template slot-scope="{ row }">{{row}}</template>
      </el-table-column>
    </el-table>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel" :disabled="dloading">关闭</el-button>
      <el-button type="primary" @click="submitForm('ruleForm')" :disabled="dloading">提交验证</el-button>
    </div> 
  </div>
</template>

<script>
import { display } from "@/api/user";
export default {
  name: 'display',
  props: {
    
  },
  data() {
    return {
      dloading: false,
      table:[],
      form: {
        ips:''
        },
        formLabelWidth: '120px',
        rules: {
          ips: [
                { required: true, message: '请输入ips', trigger: 'blur' },
              
              ] 
        }

    }
  },
  mounted() {
   
  },
 
  methods: {
    cancel(){
      this.$refs['ruleForm'].resetFields();
      // this.dialogFormVisible=false
      this.$emit('close',false)
    },
    submitForm(formName) {
        this.$refs[formName].validate(async (valid) => {
          if (valid) {
         this.dloading=true
          console.log('valid: ', valid);
          let form =this.form
          console.log('form: ', form);
          let res = await display(form)
          if(res.code===1){
            this.$message.success('操作成功')
            this.table=res.data
            // this.$emit('close')
            // this.dialogFormVisible=false
          }
          this.dloading=false
          console.log('解封res: ', res);
            // alert('submit!');
          } else {
            this.dloading=false
            console.log('error submit!!');
            return false;
          }
        });
    },
    
  }
}
</script>

<style scoped>
.dialog-footer {
  /* border: 1px solid red; */
text-align: right;
}
</style>
